import { createApp } from 'vue'
import axios from 'axios'

import xss from 'xss'

let myWhiteList = xss.getDefaultWhiteList()

var options = {
  whiteList: {
    ...myWhiteList,
    ...{
      p: ['style'],
      span: ['class', 'style'],
      h1: ['id', 'style'],
      h2: ['id', 'style'],
      h3: ['id', 'style'],
      h4: ['id', 'style'],
      h5: ['id', 'style'],
      h6: ['id', 'style']
    }
  }
}

const myxss = new xss.FilterXSS(options)

import ElementUI from '@toms/element-ui'
import * as ElementPlusIconsVue from '@toms/icons/global'
import { ElMessageBox } from '@toms/element-ui'
import 'normalize.css/normalize.css'

import 'vue-directive-ellipsis/dist/ellipsis.umd.css'
import './styles/tailwind.css'
import './styles/element/index.scss'
import '/src/styles/index.scss'

import App from './App'

import '@/permission' // permission control
import { setupI18n, i18n } from './lang/index.js'
import { setupStore } from './store'
import { setupRouter } from '@/router'
import { setupComponents } from './components'
import { setupGlobDirectives } from '@/directives'
import mitt from 'mitt'

const emitter = mitt()

export const app = createApp(App)

setupRouter(app)
setupStore(app)
setupI18n(app)
setupGlobDirectives(app)
setupComponents(app)
app.use(ElementUI)

// css样式
import '@/styles/index.scss'

app.config.globalProperties.$bus = emitter
app.config.globalProperties.$axios = axios
app.config.globalProperties.$confirmError = (error) => {
  let errorCode = ''
  if (error.traceId || error.code) {
    errorCode = `<p style="font-size:12px;">${i18n.global.t('common.error_code')}: ${
      error.code + '-' || ''
    }${error.traceId || ''}</p >`
  }

  return ElMessageBox.confirm('Error', i18n.global.t('common.error'), {
    title: error.title,
    message:
      `<div style="word-break: break-word">${error.message}</div>` + errorCode,
    type: 'error',
    callback: error.callback,
    dangerouslyUseHTMLString: true,
    showCancelButton: false
  })
}
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')
